import AuthComponent from '@/components/Authorized/AuthComponent';
import React, { useState, useEffect, useRef } from 'react';
import { Table, DatePicker, Select, Button, Modal, message, Radio, Input } from 'antd';

import ProTable from '@ant-design/pro-table';
import { useRequest } from '@umijs/hooks';

import styles from './index.less'
import { exportExcel, formatFlightNo } from '@/utils/utils'
import moment from 'moment';
import { getHeavyLuggageExcel, exportHeavyLuggageExcel, queryCityInfo } from './service'
import { chargeTypeMap, payTypeMap } from '@/utils/constVal'

export default function () {
  const actionRef = useRef();
  const formRef = useRef();
  const { data: selectData } = useRequest(queryCityInfo, { loadingDelay: true }); //获取出发和到达航站
  const [searchParams, setSearchParams] = useState({});
  const [firstLoadDate, setFirstLoadDate] = useState(true);
  const columns = [
    {
      title: '订单起始日期', width: 100, dataIndex: 'orderStartDate', hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '订单结束日期', width: 100, dataIndex: 'orderEndDate', hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '航班起始日期', width: 100, dataIndex: 'flightStartDate', hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '航班结束日期', width: 100, dataIndex: 'flightEndDate', hideInTable: true,
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '支付开始时间',
      hideInTable: true,
      dataIndex: 'payBeginDate',
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '支付结束时间',
      hideInTable: true,
      dataIndex: 'payEndDate',
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{ width: '100%' }}
            format={format}
            {...rest}
          />
        );
      },
    },
    { title: '订单日期', width: 100, dataIndex: 'orderDate', hideInSearch: true },
    { title: '订单号', width: 100, dataIndex: 'orderNo' },
    { title: '银行订单号', width: 120, dataIndex: 'bankOrderNo' },
    { title: '财务订单号', width: 120, dataIndex: 'financeOrderNo' },
    { title: '航班日期', width: 100, dataIndex: 'flightDate', hideInSearch: true },
    {
      title: '航班号', width: 100, dataIndex: 'flightNo',
      renderFormItem: (_, { type, defaultRender, ...rest }) => {
        return <Input
          {...rest}
          onChange={e => {
            e.target.value = formatFlightNo(e.target.value);
            rest.onChange(e.target.value)
          }}
          allowClear maxLength={6} placeholder="3U" />;
      }
    },
    {
      title: '出发地', width: 100, dataIndex: 'org',
      renderFormItem: (_, { ...rest }, form) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
            {...rest}
          >
            {
              selectData && selectData.map((v, i) => {
                return (
                  <Select.Option key={v.CITY3CODE} value={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                )
              })
            }
          </Select>
        );
      }
    },
    {
      title: '目的地', width: 100, dataIndex: 'dst',
      renderFormItem: (_, { ...rest }, form) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={true}
            optionFilterProp="children"
            notFoundContent={null}
            {...rest}
          >
            {
              selectData && selectData.map((v, i) => {
                return (
                  <Select.Option key={v.CITY3CODE} value={v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                )
              })
            }
          </Select>
        );
      }
    },
    { title: '客票号', width: 100, dataIndex: 'tktNo' },
    {
      title: '航线性质', width: 100, dataIndex: 'segmentType',
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <Select style={{ width: '100%' }} placeholder="请选择" {...rest}>
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="国内">国内</Select.Option>
            <Select.Option value="国际">国际</Select.Option>
          </Select>
        );
      },
    },
    { title: '行李超重重量', width: 120, dataIndex: 'overWeightBkgWeight', hideInSearch: true },
    { title: '行李超出件数', width: 120, dataIndex: 'overNumberBkgNumber', hideInSearch: true },
    { title: '运费单价', width: 100, dataIndex: 'totalPrice', hideInSearch: true },
    { title: '行李性质', width: 100, dataIndex: 'bkgProperty', hideInSearch: true },
    {
      title: '收款方式', width: 100, dataIndex: 'chargeType',
      renderFormItem: (_, { ...rest }) => {
        return (
          <Select
            style={{ width: '100%' }}
            mode="multiple"
            
            placeholder="请选择" {...rest}
            onChange={(v) => {
              formRef.current.setFieldsValue({ chargeType: v });
            }}
          >
            {
              Object.keys(chargeTypeMap).map(item => (
                <Select.Option value={item}>{chargeTypeMap[item]}</Select.Option>
              ))
            }
          </Select>
        );
      },
    },

    { title: '币种', width: 100, dataIndex: 'currencySpecies', hideInSearch: true, },
    { title: '订单总价', width: 100, dataIndex: 'orderPrice', hideInSearch: true, },
    { title: '订单状态', width: 100, dataIndex: 'orderStatus', hideInSearch: true, },

    {
      title: '支付状态', width: 100, dataIndex: 'payType',
      renderFormItem: (_, { ...rest }) => {
        return (
          <Select
            style={{ width: '100%' }}
            mode="multiple"
            
            placeholder="请选择" {...rest}
            onChange={(v) => {
              formRef.current.setFieldsValue({ payType: v });
            }}
          >
            {
              Object.keys(payTypeMap).map(item => (
                <Select.Option value={item}>{payTypeMap[item]}</Select.Option>
              ))
            }
          </Select>
        );
      },
    },

    { title: '支付时间', width: 100, dataIndex: 'operationDate', hideInSearch: true },
    { title: '乘机人', width: 100, dataIndex: 'paxName', hideInSearch: true },
    {
      title: '销售渠道', width: 100, dataIndex: 'cellChannel',
      // renderFormItem: (_, { ...rest }) => {
      //   const format = 'YYYY-MM-DD';
      //   return (
      //     <Select style={{ width: '100%' }} {...rest}>
      //       <Select.Option value="">全部</Select.Option>
      //     </Select>
      //   );
      // },
    },
    { title: '操作人号', width: 100, dataIndex: 'userNo', hideInSearch: true, },
    { title: '操作人', width: 100, dataIndex: 'userName', hideInSearch: true, },
    { title: '部门', width: 100, dataIndex: 'department', hideInSearch: true, },
    { title: '缴纳流水号', width: 110, dataIndex: 'turnNumber', },
    { title: '缴纳状态', width: 100, dataIndex: 'turnStatus', hideInSearch: true, },
    { title: '行政区域', width: 110, dataIndex: 'areaCompany', }
  ]

  const exportExcelHandle = async () => {
    let blobData = await exportHeavyLuggageExcel(searchParams);
    exportExcel(blobData, '逾重行李结算报表');
  }
  const initNowDate = (obj, key) => {
    obj[key] = moment().format('YYYY-MM-DD');
    formRef.current.setFieldsValue({ [key]: moment() });
  }
  const beforeSearchSubmit = (params) => {
    params['orderStartDate'] = params.orderStartDate ? params.orderStartDate.format('YYYY-MM-DD') : '';
    params['orderEndDate'] = params.orderEndDate ? params.orderEndDate.format('YYYY-MM-DD') : '';
    params['flightStartDate'] = params.flightStartDate ? params.flightStartDate.format('YYYY-MM-DD') : '';
    params['flightEndDate'] = params.flightEndDate ? params.flightEndDate.format('YYYY-MM-DD') : '';
    params['payBeginDate'] = params.payBeginDate ? params.payBeginDate.format('YYYY-MM-DD') : '';
    params['payEndDate'] = params.payEndDate ? params.payEndDate.format('YYYY-MM-DD') : '';
    return params;
  }
  const onReset = () => {
    formRef.current.setFieldsValue({
      orderStartDate: moment()
    })
    formRef.current.setFieldsValue({
      orderEndDate: moment()
    })
  }
  return (
    <>
      <ProTable
        scroll={{ x: 1100, y: 300 }}
        // className="rest-pro-table-form-compact"
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        search={{
          span: { //设置排列方式
            xs: 24,
            sm: 24,
            md: 6,
            lg: 6,
            xl: 6,
            xxl: 6,
          }
        }}
        beforeSearchSubmit={beforeSearchSubmit}
        onReset={onReset}
        options={{ density: false, fullScreen: true, reload: false, setting: true }}
        request={params => {
          console.log(params)
          if (!params['orderStartDate'] && !params['orderEndDate'] && firstLoadDate) {
            initNowDate(params, 'orderStartDate');
            initNowDate(params, 'orderEndDate');
            // initNowDate(params, 'flightStartDate');
            // initNowDate(params, 'flightEndDate');
          }
          if (!params.chargeType) {
            formRef.current.setFieldsValue({
              chargeType: Object.keys(chargeTypeMap)
            })
          }
          if (!params.payType) {
            formRef.current.setFieldsValue({
              payType: Object.keys(payTypeMap)
            })
          }
          params.chargeType = params.chargeType.toString();
          params.payType = params.payType.toString();
          console.log(params)
          setSearchParams(params);
          return getHeavyLuggageExcel(params)
        }}
        rowKey="id"
        postData={data => data}
        toolBarRender={() => [
          <div className={styles.btnWrapper}>
            <AuthComponent authCode="mkt.heavyLuggageExecl.export">
              <Button type="primary" onClick={exportExcelHandle}>导出</Button>
            </AuthComponent>
          </div>
        ]}
        headerTitle={
          <div>
            <span style={{ paddingRight: 10, fontWeight: "bold", color: "#000" }}>逾重行李结算表</span>
          </div>
        }
      ></ProTable>
    </>
  );
}
